<template>
  <div class="material">
    <video
      v-if="isVideo(url)"
      ref="video"
      :controls="isControls"
      @mouseleave="handleVideoLeave"
      class="material__item"
      :src="url"
      :style="{
        maxWidth,
        maxHeight
      }"
      @click="handleClick"
    ></video>
    <img
      v-else
      class="material__item"
      :src="url"
      :style="{
        maxWidth,
        maxHeight
      }"
      @click="handleClick"
    >
  </div>
</template>

<script>
import { isVideo } from "@/utils";
export default {
  name: "CreativeMaterial",
  props: {
    url: String,
    isControls: {
      type: Boolean,
      default: false
    },
    maxWidth: {
      type: String,
      default: "100%"
    },
    maxHeight: {
      type: String,
      default: "100%"
    }
  },
  methods: {
    isVideo,
    handleClick() {
      this.$emit("click");
    },
    handleVideoLeave() {
      this.$refs.video.pause();
    }
  }
};
</script>

<style lang="scss" scoped>
.material {
  width: 100%;
  height: 100%;
  &__item {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>